<template>
	<SizeObserver class="bear-BearTabs"
				  @bear-resize="$_bear_resizeFn">
		<div class="bear-head">
			<div class="bear-tab"
				 v-for="(tab,index) in tabs"
				 :class="{active:index===realValue}"
				 :style="{'flex-basis':sigleWidth+'px'}"
				 :key="index"
				 @click="$_bear_clickTab(index)">{{tab.title}}</div>
			<div class="bear-active-line"
				 :style="{width:sigleWidth+'px',transform:'translateX('+(-offset/tabs.length+realValue*sigleWidth)+'px)',transition:offset?'none':null}"></div>
		</div>
		<div class="bear-body">
			<div class="bear-container"
				 :style="{width:tabs.length*100+'%',transform:'translateX('+(offset-realValue*width)+'px)',transition:offset?'none':null}"
				 v-on="listeners"
				 @touchmove="$_bear_touchmove1">
				<slot></slot>
			</div>
		</div>
	</SizeObserver>
</template>

<script>
	/* global utils */
	/**
	 * @author 唐国雄
	 * 标签页容器
	 * 属性----------------------
	 * v-model		当前标签页索引
	 * 方法----------------------
	 * toIndex(index)	跳转到指定索引页签
	 */
	import TouchMixin from './touch';
	import SizeObserver from '../SizeObserver';
	export default{
		name:'BearTabs',
		provide(){
			return {BearTabsInstance:this};
		},
		components:{
			SizeObserver
		},
		mixins:[TouchMixin],
		props:{
			// 当前标签页索引
			value:{
				type:Number,
				default:0
			}
		},
		data(){
			return {
				/**
				 * 单个标签页
				 * @typedef BearTab
				 * @property {String} title 标签页标题
				 */
				/**
				 * 步骤数据
				 * @type {BearTab[]}
				 */
				tabs:[],
				realValue:this.value,
				width:0,
				offset:0
			};
		},
		computed:{
			sigleWidth(){
				return this.width/this.tabs.length;
			},
			listeners(){
				return {
					touchstart:this.$_bear_touchStart,
					touchmove:this.$_bear_touchMove,
					touchend:this.$_bear_TouchEnd,
					touchcancel:this.$_bear_TouchEnd
				};
			}
		},
		watch:{
			value(val){
				this.realValue=val;
			}
		},
		created(){
			this.$_bear_resizeFn=utils.debounced(function(data){
				this.width=data.width;
			},100,this);
			this.slotChange=utils.debounced(function(){
				this.$nextTick(function(){
					const tabs=[];
					for(const ele of this.$children[0].$children){
						if(ele.$options.name==='BearTab'){
							tabs.push({
								title:ele.title
							});
						}
					}
					this.tabs=tabs;
					if(this.realValue>this.tabs.length-1){
						this.realValue=0;
						this.$emit('input',0);
					}
				});
			},100,this);
		},
		methods:{
			/**
			 * 点击指定标签页
			 * @param {Number} index 标签页索引
			 */
			$_bear_clickTab(index){
				this.realValue=index;
				this.$emit('input',this.realValue);
			},
			$_bear_touchmove1(e){
				if(this.touchDirection==='horizontal'){
					const realValue=this.realValue;
					const deltaX=this.deltaX;
					if(
						!(
							(realValue===0&&deltaX>0)||
							(realValue===(this.tabs.length-1)&&deltaX<0)
						)
					){
						this.offset=this.deltaX;
					}
				}
			},
			$_bear_TouchEnd(){
				if(this.offset){
					if(this.touchType==='swipe'||this.offsetX>this.width/2){
						if(this.offset>0){
							this.toIndex(this.realValue-1);
						}else{
							this.toIndex(this.realValue+1);
						}
					}
					this.offset=0;
				}
			},
			toIndex(index){
				this.realValue=Math.max(0,Math.min(this.tabs.length-1,index));
			}
		}
	};
</script>

<style lang="scss">
	$head-height:44px;
	$duration:.3s;
	$width-percent:70%;
	.bear-BearTabs{
		>.bear-head{
			height:$head-height;
			position:relative;
			display:flex;
			background:#fff;
			border-bottom:1px solid #ebedf0;
			>.bear-tab{
				color:#646566;
				font-size:14px;
				display:flex;
				justify-content:center;
				align-items:center;
				&.active{
					color:#323233;
				}
			}
			>.bear-active-line{
				position:absolute;
				bottom:0;
				height:3px;
				transition:transform $duration;
				&:after{
					content:'';
					position:absolute;
					background:#3195f2;
					width:$width-percent;
					height:100%;
					top:0;
					left:calc((100% - #{$width-percent})/2);
				}
			}
		}
		>.bear-body{
			height:calc(100% - #{$head-height});
			overflow:hidden;
			>.bear-container{
				touch-action:none;
				height:100%;
				display:flex;
				transition:transform $duration;
				>.bear-BearTab{
					height:100%;
					width:0;
					flex-grow:1;
					overflow:auto;
				}
			}
		}
	}
</style>
